<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="../../inc.jsp"></jsp:include>
<body>
	<script type="text/javascript">
		$(function() {
			$('#pp').portal({});
			
			var left = $("#role_user_left").panel();
			var center = $("#role_user_center").panel();
			var right = $("#role_user_right").panel();
			 
			// add the panel to portal
			$('#pp').portal('add', {
			    panel: left,
			    columnIndex: 0
			});
			
			// add the panel to portal
			$('#pp').portal('add', {
			    panel: center,
			    columnIndex: 1
			});
			
			// add the panel to portal
			$('#pp').portal('add', {
			    panel: right,
			    columnIndex: 2
			});
			
			$("#role_org_tree").tree({
				parentField:"pid",
				url:"role/org.action",
				animate:true,
				onClick:function(node) {
					$("#role_user_datagrid").datagrid("load", {orgId:node.id});
				}
			});
			
			$("#role_user_datagrid").datagrid({
				width : 'auto',
				height : 'auto',
				fit:true,
				//pageSize : 20,
				//pageList : [ 5, 10, 20 ],
				nowrap : false,
				striped : true,
				//singleSelect : true,
				url : "role/user_datagrid.action",
				loadMsg : "数据正在加载……",
				//pagination : true,
				rownumbers : true,
				columns:[[
					{field:"ck",checkbox:true} ,      
					{field : 'name',title : '用户名',align : 'center',width : '50'},
					{field : 'sex',title : '性别',align : 'center',width : '50',
						formatter:function(val){
							return findValueByKey(sexenums, val);
						}},
					{field : 'job',title : '职务',align : 'center',width : '50'}
				]],
				onCheck:function(index, data) {
					//console.info($("#"+data.id)==null);
					var select = $("#role_org_tree").tree("getSelected");
					$("#content").append("<span id='"+data.id+"'>"+data.name+
							"("+select.text+");&nbsp;</span>");
				},
				onUncheck:function(index, data) {
					$("#"+data.id).remove();
				}
			});
		});
	</script>
	<div id="pp" style="width:770px;height:365px;">
	    <div style="width:33%;height:340px;"></div>
	    <div style="width:33%;height:340px;"></div>
	    <div style="width:33%;height:340px;"></div>
	</div>
	<div id="role_user_left" class="easyui-panel" style="height:335px;">
		<ul id="role_org_tree"></ul>
	</div>
	<div id="role_user_center" class="easyui-panel" style="height:335px;">
		<table id="role_user_datagrid"></table>
	</div>
	<div id="role_user_right" class="easyui-panel" style="height:335px;">
	<div id="content"></div>
	</div>
</body>